<template>
  <div class="contact-container">
    <Header />
    <div class="contact-wrapper">
      <div class="contact-info-card">
        <h2 class="section-title"><i class="el-icon-phone-outline"></i> 联系我们</h2>
        <div class="contact-info">
          <div class="info-item">
            <i class="el-icon-map-marker"></i>
            <div class="info-content">
              <p class="info-label">地址</p>
              <p class="info-value">陕西省汉中市汉台区民主街43号</p>
            </div>
          </div>
          <div class="info-item">
            <i class="el-icon-phone"></i>
            <div class="info-content">
              <p class="info-label">电话</p>
              <p class="info-value">0916-2512345</p>
            </div>
          </div>
          <div class="info-item">
            <i class="el-icon-envelope"></i>
            <div class="info-content">
              <p class="info-label">邮箱</p>
              <p class="info-value">info@hanzhongtourism.com</p>
            </div>
          </div>
          <div class="info-item">
            <i class="el-icon-clock"></i>
            <div class="info-content">
              <p class="info-label">工作时间</p>
              <p class="info-value">周一至周五: 9:00 - 18:00</p>
            </div>
          </div>
        </div>
        <div class="map-placeholder">
          <i class="el-icon-location-outline"></i>
          <p>汉中旅游局位置地图</p>
          <p style="font-size: 12px; margin-top: 5px;">陕西省汉中市汉台区民主街43号</p>
        </div>
      </div>

      <el-card class="contact-form-card" shadow="hover" style="border: none;">
        <h2 class="form-title">发送留言</h2>
        <el-form @submit.prevent="submitForm" :model="form" :rules="rules" ref="contactForm">
          <el-form-item label="姓名" prop="name">
            <el-input v-model="form.name" placeholder="请输入您的姓名"></el-input>
          </el-form-item>
          <el-form-item label="邮箱" prop="email">
            <el-input v-model="form.email" type="email" placeholder="请输入您的邮箱"></el-input>
          </el-form-item>
          <el-form-item label="留言" prop="content">
            <el-input type="textarea" v-model="form.content" :rows="4" placeholder="请输入您的留言内容"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button @click="submitForm()" type="primary" native-type="submit" class="submit-btn">提交留言</el-button>
          </el-form-item>
        </el-form>
      </el-card>
    </div>
  </div>
</template>

<script>
import Header from '@/components/Header.vue'

export default {
  name: 'Contact',
  components: {
    Header
  },
  data() {
    return {
      form: {
        name: '',
        email: '',
        content: ''
      },
      rules: {
        name: [
          { required: true, message: '请输入姓名', trigger: 'blur' },
          { min: 2, max: 20, message: '姓名长度在 2 到 20 个字符', trigger: 'blur' }
        ],
        email: [
          { required: true, message: '请输入邮箱', trigger: 'blur' },
          { type: 'email', message: '请输入有效的邮箱地址', trigger: 'blur' }
        ],
        content: [
          { required: true, message: '请输入留言', trigger: 'blur' },
          { min: 5, message: '留言内容至少 5 个字符', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    submitForm() {
      this.$http.post("userApi/contact/text", this.form).then((resp) => {
       if (resp.data.code == 200){
		   this.form.name='';
		   this.form.content='';
		   this.form.email='';
		   
		   this.$message({
		   	message: '上传成功',
		   	type: 'success'
		   });
	   }
      });
    }
  }
}
</script>

<style scoped>
.contact-container {
  min-height: calc(100vh - 60px);
  padding: 20px;
  background-color: #f5f7fa;
}

.contact-wrapper {
  display: flex;
  justify-content: center;
  gap: 30px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px 0;
}

@media (max-width: 768px) {
  .contact-wrapper {
    flex-direction: column;
    padding: 10px;
  }
}

.contact-info-card {
  flex: 1;
  min-width: 300px;
  background: #fff;
  border-radius: 12px;
  padding: 25px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.contact-info-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}

.section-title {
  color: #2c3e50;
  font-size: 24px;
  margin-bottom: 25px;
  padding-bottom: 15px;
  border-bottom: 1px solid #eee;
  display: flex;
  align-items: center;
}

.section-title i {
  margin-right: 10px;
  color: #3498db;
}

.contact-info {
  margin-bottom: 30px;
}

.info-item {
  display: flex;
  align-items: flex-start;
  margin-bottom: 20px;
  padding: 10px;
  border-radius: 8px;
  transition: background-color 0.2s ease;
}

.info-item:hover {
  background-color: #f9f9f9;
}

.info-item i {
  font-size: 20px;
  color: #3498db;
  margin-right: 15px;
  margin-top: 3px;
  min-width: 24px;
}

.info-content {
  flex: 1;
}

.info-label {
  font-weight: 500;
  color: #7f8c8d;
  margin-bottom: 5px;
  font-size: 14px;
}

.info-value {
  color: #2c3e50;
  font-size: 16px;
}

.map-placeholder {
  height: 200px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: #f9f9f9;
  border-radius: 8px;
  color: #7f8c8d;
  font-size: 14px;
  transition: all 0.3s ease;
}

.map-placeholder:hover {
  background-color: #f0f0f0;
}

.map-placeholder i {
  font-size: 32px;
  margin-bottom: 10px;
  color: #bdc3c7;
}

.contact-form-card {
  flex: 1;
  min-width: 300px;
  max-width: 500px;
  border-radius: 12px;
  overflow: hidden;
}

.form-title {
  color: #2c3e50;
  font-size: 20px;
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 1px solid #eee;
}

.el-form-item {
  margin-bottom: 20px;
}

.el-input, .el-textarea {
  width: 100%;
}

.submit-btn {
  width: 100%;
  padding: 12px 0;
  font-size: 16px;
  background-color: #3498db;
  border-color: #3498db;
  transition: all 0.3s ease;
}

.submit-btn:hover {
  background-color: #2980b9;
  border-color: #2980b9;
}
</style>